<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="js/vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>{{address}}</h1>
		<!-- v-cloak指令，解决页面闪现问题 -->
		<div id="app" v-cloak>
			<h3>{{address}}</h3>
			<input type="text" id="address" v-model="address"/>
			
			<p>{{name}},{{age}}</p>
			<p>{{hobby}},{{hobby.length}}</p>
			<p>{{hobby[0]}},{{hobby[hobby.length-1]}}</p>
			<!-- v-for循环指令 -->
			<p>
				<span v-for="o in hobby">{{o}}</span>
			</p>
			<p>
				<!-- o,i in hobby 索引值是i，值是o -->
				<span v-for="o,i in hobby">{{i}}-{{o}} </span>
			</p>
			<p>{{gril.name}},{{gril.age}}</p>
			<!-- 判断，如果age年龄>=18成年，<18未成年 -->
			<!-- 如果是true就展现后面内容，false就不展现 -->
			<p v-if="gril.age>=18">成年</p>
			<p v-if="gril.age<18">未成年</p>
			<p v-if="money>=1900">一线不差钱</p>
			<p v-else-if="money>=1200">二线不差钱</p>
			<p v-else-if="money>=800">三线不差钱</p>
			<p v-else>屌丝很差钱</p>
			<p v-show="gril.age>=18">成年</p>
			<p v-show="gril.age<18">未成年</p>
			<!-- 在属性前面加冒号，是告诉Vue这个属性后面的值是变量，不是字符串，必须解析 -->
			<!-- v-bind绑定，简写:href 在属性中使用data数据 -->
			<a target="_blank" :href="url">Java培优</a>
			<br/>
			<button onclick="alert('向我开炮')">点我</button>
			<!-- v-on:click点击，简写@click -->
			<button v-on:click="method">点我</button>
		</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			address:"北京颐和园",
			name:"老王",
			money:1000,
			age:1234567,
			url:"http://act.codeboy.com",
			hobby:["摄影","上天","潜水"],
			gril:{
				name:"司藤",
				age:18
			}
		},
		methods:{
			method:function(){
				alert("点我休息一下");
			}
		}
	});
</script>